<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>SivanLiu</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mdui/0.2.1/css/mdui.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--nav-->
<div class="mdui-container mdui-appbar-fixed nav">
    <div class="mdui-appbar">
        <div class="mdui-toolbar mdui-color-theme">
            <a href="javascript:;" class="mdui-typo-title">Hello Im SivanLiu</a>
            <div class="mdui-toolbar-spacer"></div>
            <div class="mdui-fab-wrapper"  mdui-fab="{trigger: 'hover'}">
                <button class="mdui-fab mdui-ripple">
                    <i class="mdui-icon material-icons">&#xe871;</i>
                    <i class="mdui-icon mdui-fab-opened material-icons">&#xe254</i>
                </button>
                <div class="mdui-fab-dial">
                    <ul class="mdui-list">
                        <li class=" mdui-fab mdui-fab-mini  mdui-list-item mdui-ripple">HOME</li>
                        <li class=" mdui-fab mdui-fab-mini  mdui-list-item mdui-ripple">ABOUT</li>
                        <li class=" mdui-fab mdui-fab-mini  mdui-list-item mdui-ripple">ALBUM</li>
                        <li class=" mdui-fab mdui-fab-mini  mdui-list-item mdui-ripple">NEW'</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div><!--/. nav-->
<!--作品容器-->
<div class="mdui-container">

</div><!--/.作品-->
<canvas id="canvas"></canvas>
<script async src="js/index.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mdui/0.2.1/js/mdui.min.js"></script>
</body>
</html>